/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */

<template>
    <sf-form ref="form" :label-width="100">
        <sf-form-item>
            <sf-fieldlabel><lang>名称</lang></sf-fieldlabel>
            <sf-textfield
                v-model="submitData.name"
                :default-width="fieldWidth"
                :default-disabled="disable.name"
                :allow-blank="false"
                :max-length="40"
                :regex="/^[.a-zA-Z0-9\u4e00-\u9fa5]+$/"
                :regex-text="_('节点名称只允许输入中英文、数字和点（.）')"
            />
        </sf-form-item>

        <sf-form-item :default-hidden="hideHostname" >
            <sf-fieldlabel><lang>主机名</lang></sf-fieldlabel>
            <sf-textfield
                v-model="submitData.hostName"
                :default-width="fieldWidth"
                :default-disabled="disable.hostName"
                :allow-blank="hideHostname"
            />
        </sf-form-item>

        <sf-form-item>
            <sf-fieldlabel><lang>管理IP</lang></sf-fieldlabel>
            <sf-textfield
                v-model="submitData.mnIp"
                :default-width="fieldWidth"
                vtype="ip"
                :default-disabled="disable.mnIp"
                :allow-blank="false"
            />
        </sf-form-item>

        <sf-form-item>
            <sf-fieldlabel><lang>数据/业务IP</lang></sf-fieldlabel>
            <sf-textfield
                v-model="submitData.dnIp"
                :default-width="fieldWidth"
                vtype="ip"
                :default-disabled="disable.dnIp"
                :allow-blank="false"
            />
        </sf-form-item>

        <sf-form-item>
            <sf-fieldlabel><lang>用户名</lang></sf-fieldlabel>
            <sf-textfield
                v-model="submitData.userName"
                :default-width="fieldWidth"
                :allow-blank="false"
                :default-disabled="disable.userName"
                :validator="_usernameValidator"
            />
        </sf-form-item>

        <sf-form-item>
            <sf-fieldlabel><lang>密码</lang></sf-fieldlabel>
            <password-input
                :editable="true"
                :default-width="fieldWidth"
                v-model="submitData.password"
                :default-disabled="disable.password"
                :validator="null"
                :can-show-psw="true"
            />
        </sf-form-item>
    </sf-form>
</template>

<script>
import passwordInput from 'src/home/mod_cluster/common/password_item';
import usernameValidator from 'src/util/validator/username_validator';

const FIELD_WIDTH = 350;
const ACTION_ADD = 'add';
const ACTION_EDIT = 'edit';
const DEFAULT_VALUE = {
    mnIp: '',
    dnIp: '',
    name: '',
    hostName: '',
    userName: '',
    password: ''
};

export default {
    
    components: {
        passwordInput
    },

    props: {
        actionType: {
            type: String,
            default () {
                return ACTION_ADD;
            },
            validator (v) {
                return [ACTION_ADD, ACTION_EDIT].indexOf(v) > -1;
            }
        },
        disableFields: {
            type: Array,
            default: function () {
                return ['hostName'];
            }
        }
    },

    data () {
        return {
            submitData: Object.assign({}, DEFAULT_VALUE),
            disable: {},
            eyeIcon: 'eye-slash',
            pswType: 'password'
        };
    },

    watch : {
        disableFields: {
            deep: true,
            immediate: true,
            handler (fields) {
                fields.forEach(key => {
                    this.disable[key] = true;
                });
            }
        }
    },

    computed: {
        fieldWidth () {
            return FIELD_WIDTH;
        },

        hideHostname () {
            return this.actionType === ACTION_ADD;
        }
    },

    methods: {
        _usernameValidator: usernameValidator,

        getJsonValue () {
            return this.submitData;
        },

        setJsonValue (data) {
            Object.assign(this.submitData, DEFAULT_VALUE, data);
        }
    }
};
</script>
